<template>
    <div class="info">
        <div class="news-view">
            <h2 class="title">
                您现在的位置是：
                <a href="/">网站首页</a>&nbsp;&gt;&nbsp;
                <a href="/">学无止境</a>
            </h2>
            <h3 class="news-title">
                {{ article.title }}
            </h3>
            <div class="news-author">
                <span class="au01">{{ article.author}}</span>
                <span class="au02">{{ article.created_at }}</span>
                <span class="au03">共
                        <b>{{ article.view_num }}</b>
                        人围观
                    </span>
            </div>
            <div class="tags" v-show="tags.length">
                <a v-for="(value, key) in tags" :key="key">
                    {{ value }}
                </a>
            </div>
            <div class="news-about">
                <strong>简介</strong>
                {{ article.excerpt }}
            </div>
            <div class="detail-image" v-if="article.thumb_image">
                <p> 预览图片</p>
                <img :src="article.thumb_image" alt="item.title" class="img-responsive">
            </div>
            <template v-if="article.format === 1">
                <div class="news-info"  v-html="article.content"></div>
            </template>
            <template v-else>
                <div class="news-info"  v-html="markdown"></div>
            </template>
        </div>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions, mapMutations} from "vuex"
    import marked from 'marked'
    import highlight from 'highlight.js'
    import article from "../../store/modules/article";
    import 'highlight.js/styles/github.css' // 样式文件

    marked.setOptions({
        highlight: function (code) {
            return highlight.highlightAuto(code).value;
        }
    });

    export default {
        props: ['id'],
        name: "Detail",
        methods: {
            getArticle() {
                this.setArticleId(this.id);
                this.getArticleAction();
                this.getArticleListAction();
            },
            ...mapActions("article", {
                getArticleAction: "getArticle",
                getArticleListAction: "getArticleList"
            }),
            ...mapMutations("article", ["setArticleId"])
        },
        watch: {
            id(value) {
                this.getArticle()
            },
        },
        created() {
            this.getArticle();
        },
        computed: {
            ...mapState('article', ['article']),
            ...mapGetters('article', {
                tags: 'tags'
            }),
            markdown() {
                return marked(this.article.content || "")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .news-author {
        margin: 5px auto;
        span {
            margin-right: 10px;
            padding-left: 20px;
            &.au01 {
                background: url(../../../images/author.png) no-repeat left center;
            }
            &.au02 {
                background: url(../../../images/date.png) no-repeat left center;
            }
        }
    }

    .title {
        margin-top: 0;
        box-sizing: content-box;
        line-height: 40px;
        height: 40px;
        font-size: 14px;
        border-bottom: #000 2px solid;
        font-weight: bold;
    }

    .tags a {
        background: #F4650E;
        padding: 3px 8px;
        margin: 0 5px 0 0;
        color: #fff;
    }

    .info {
        margin-bottom: 30px;
    }

    .news-about {
        color: #888888;
        border: 1px solid #F3F3F3;
        padding: 10px;
        margin: 20px auto 15px auto;
        line-height: 23px;
        background: none repeat 0 0 #F6F6F6;
    }

    .detail-image {
        margin-bottom:15px;
    }
</style>